<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<jsp:include page="/WEB-INF/jsp/lib.jsp" />
<!-- 查询用户 -->
角色：<input id="role" />&nbsp;
姓名：<input id="name" />&nbsp;
用户名：<input id="username" /><br><br>
部门：<select id="deptId" >
		<option value="">--请选择--</option>
		</select>&nbsp;
职位：<select id="positionId" >
		<option value="">--请选择--</option>
		</select>&nbsp;&nbsp;
性别：男<input name="sex" type="radio" value="1"/>
女<input name="sex" type="radio" value="0"/>
<button id="btn">搜索</button><br><br>
<table id="dg"></table>
<!-- 对话框 -->
<div id="dlg">
	<form id="ff">
		<input type="hidden" name="id">
		角&nbsp;&nbsp;色：<input name="role"><br>
		姓&nbsp;&nbsp;名：<input name="name"><br>
		用户名：<input name="username"><br>
		密&nbsp;&nbsp;码：<input name="password"><br>
		性&nbsp;&nbsp;别：男<input name="sex" type="radio" value="1"/>
			 女<input name="sex" type="radio" value="0"/><br>
		部&nbsp;&nbsp;门：<select id="deptIds" name="deptId">
				<option value="">--请选择--</option>
			</select><br>
		职&nbsp;&nbsp;位：<select id="positionIds" name="positionId">
				<option value="">--请选择--</option>
			  </select><br>
	</form>
</div>
<!-- js处理数据 -->
<script type="text/javascript">

	//初始化表格
	$(function(){
		var url
		//初始化，查询后端的部门列表
		$.ajax({
			url:"dept/list.do?rows=50",
			success:function(data){
				$.each(data.rows,function(index,dept){
					$("#deptId").append("<option value="+dept.id+">"+dept.deptName+"</option>")
					$("#deptIds").append("<option value="+dept.id+">"+dept.deptName+"</option>")
				})
			}
		})
		//部门的下拉列表绑定change事件
		$("#deptId").change(function(){
			//重置下拉列表中原有的html代码
			$("#positionId").html("<option value=''>--请选择--</option>");
			//获取选中的部门id
			var deptId = $("#deptId").val();
			//根据部门id查询所有的职位
			$.ajax({
				url:"position/list.do?deptId="+deptId,
				success:function(data){
					//遍历rows职位数据
					$.each(data.rows,function(index,position){
						//追加
						$("#positionId").append("<option value="+position.id+">"+position.positionName+"</option>")
					})
				}
			})
		})
		
		//带参数刷新表格
		$("#btn").click(function(){
			var sex
			$("input[name=sex]").each(function(){
				if(this.checked){
					sex=this.value
				}
			})
			$("#dg").datagrid({
				queryParams:{
					name:$("#name").val(),
					username:$("#username").val(),
					role:$("#role").val(),
					sex:sex,
					positionId:$("#positionId").val(),
				}
			});
		})
		
		$("#deptIds").change(function(){
			//重置下拉列表中原有的html代码
			$("#positionIds").html("<option value=''>--请选择--</option>");
			//获取选中的部门id
			var deptId = $("#deptIds").val();
			//根据部门id查询所有的职位
			$.ajax({
				url:"position/list.do?deptId="+deptId,
				success:function(data){
					//遍历rows职位数据
					$.each(data.rows,function(index,position){
						//追加
						$("#positionIds").append("<option value="+position.id+">"+position.positionName+"</option>")
					})
				}
			})
		})
		//初始化对话框
		$("#dlg").dialog({
			width:260,
			height:240,
			//默认对话框是关闭的
			closed:true,
			buttons:[{
				text:"保存",
				//图标样式
				iconCls:"icon-save",
				handler:function(){
					//获取表单参数
					var params = $("#ff").serialize();
					//提交表单
					$.ajax({
						url:url,
						data:params,
						//指定返回数据的格式
						dataType:"json",
						//data是响应的数据 data结构
						success:function(data){
							//保存成功
							$.messager.alert("提示","保存成功","info",function(){
								//关闭对话框
								$("#dlg").dialog("close");
								//刷新表格
								$("#dg").datagrid("reload")
							})
						}
					})
				}
			},{
				text:"取消",
				iconCls:"icon-cancel",
				handler:function(){
					//关闭对话框
					$("#dlg").dialog("close");
				}
			}]
		})
		
		//初始化表
		$("#dg").datagrid({
			//自适应列宽
			fitColumns:true,
			//加载数据
			url:"staff/listAdmin.do",
			//列表栏
			//field的值是json数据的key
			//title显示的列标题
			columns:[[
				{field:'id',title:'ID',width:100},
				{field:'name',title:'姓名',width:100},
				{field:'username',title:'用户名',width:100},
				{field:'sex',title:'性别',width:100,
					formatter:function(value){
						if(value==1){
							return "男"
						}else{
							return "女"
						}
					}},
				{field:'positionName',title:'职位',width:100},
				{field:'roleName',title:'角色',width:100},
				{field:'description',title:'角色描述',width:100}
					]],
			//开启分页
			pagination:true,
			//开启单选
			singleSelect:true,
			//定义工具栏
			toolbar:[{
				text:"增加",
				iconCls:"icon-add",
				handler:function(){
					//打开对话框
					$("#dlg").dialog("open");
					//修改对话框标题
					$("#dlg").dialog("setTitle","增加用户");
					url="staff/save.do";
				}
			},"-",{
				text:"修改",
				iconCls:"icon-edit",
				handler:function(){
					//获取选中的数据
					var row = $("#dg").datagrid("getSelected");
					if(row){
						$("#dlg").dialog("open");
						$("#dlg").dialog("setTitle","修改用户");
						//清除表单残留内容
						$("#ff").form("clear");
						//将选择的数据回显表单
						$("#ff").form("load",row);
						//处理id的回填数据
						$("input[name=id]").val(row.id);
						url="staff/update.do";
					}else{
						//没有选中数据就提示用户选择数据行
						$.messager.alert("提示","请先选中一行数据","info")
					}
				}
			},"-",{
				text:"删除",
				iconCls:"icon-remove",
				handler:function(){
					var row = $("#dg").datagrid("getSelected")
					if(row){
						$.messager.confirm('确认对话框', '您想删除【'+row.name+'】吗？',function(shi){
							if(shi){
								$.ajax({
									url:"staff/delete.do?id="+row.id,
									//data:{id:row.id},
									success:function(){
										$("#dg").datagrid("reload")
									}
								})
							}
						})
					}else{
						$.messager.alert("提示","请先选中一行数据","info")
					}
				}
			}]
		})
	})
</script>